<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <link rel="icon" th:href="@{/images/logo.png}" type="image/x-icon"/>
    <meta charset="UTF-8"/>
    <meta name="referrer" content="no-referrer"/>
    <title>已选课程</title>
    <!-- jquery -->
    <script src="//lib.sinaapp.com/js/jquery/1.12.4/jquery-1.12.4.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
          integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css"
          integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">


    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"
            integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
            crossorigin="anonymous"></script>

    <script type="text/javascript" th:src="@{/js/common.js}"></script>
    <!--    MD5加密-->
    <script src="http://cdn.bootcss.com/blueimp-md5/1.1.0/js/md5.min.js"></script>
    <!-- 引入 layui.css -->
    <link rel="stylesheet" href="//unpkg.com/layui@2.6.8/dist/css/layui.css">
    <!-- 引入 layui.js -->
    <script src="//unpkg.com/layui@2.6.8/dist/layui.js"></script>


    <style>
        .row {
            margin-top: -25px
        }

        .container-fluid {
            padding-top: 36px;
            margin-left: 22px;
            margin-right: 22px;
            padding-bottom: 79px;
            background-color: white;
            margin-bottom: -37px;
            margin-top: -7px;
        }

        body {
            background-color: #F7F6F7;
        }

    </style>
</head>
<body>

<!--导航栏-->
<div th:replace="common/common::navigation"></div>

<!--主体-->
<div class="container-fluid">
    <div class="row">
        <!-- 左边----课程列表 -->
        <ul class="col-xs-12 col-lg-9 col-md-12" style="height: 551px;">
            <h3>
                <span class="glyphicon glyphicon-list" aria-hidden="true" style="margin-right: 8px;"></span>
                <span>已选课程</span>
            </h3>
            <hr>

            <div class="btn-group" role="group" style="margin-left: 523px; margin-top: 172px;" th:if="${selectedCourse != null}">
                <li class="media">
                    <div class="media-body" style="font-size: 16px;">
                        <span class="media-heading" th:text="${selectedCourse.name}">
                            课程名称</span>

                        <div style="margin-top: 7px;">
                            <div style="float: left; color: #999" th:text="${selectedCourse.teacher}">
                                教师名称
                            </div>
                        </div>
                        <div style="float: right">
                            <a href='javascript:void(0);' th:onclick="|dropCourse(${selectedCourse.id})|">
                                <span class="label label-success">退课</span>
                            </a>
                        </div>
                        <br>


                    </div>
                </li>
            </div>

            <div class="btn-group" role="group" style="margin-left: 523px; margin-top: 172px;">
                <a th:href="@{/list(flag=1)}">
                    <label type="button" class="btn btn-default">回到选课页面</label>
                </a>
            </div>
        </ul>
    </div>
</div>

<script>

    function dropCourse(courseId) {
        var loading = layer.load(0, {
            shade: false,
            time: 2 * 1000
        });

        $.post(
            CONTEXT_PATH + "/dropCourse",
            {
                courseId: courseId
            },
            function (data) {
                layer.close(loading)
                layer.msg(data.respMsg);
                if (data.respCode === 200) {
                    setTimeout(function () {
                        location.reload()
                    }, 800)
                }
            }
        )
    }

</script>


</body>
</html>